<!--src/views/cases/ListViewSearch.vue-->
<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  searchParams: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['search'])

// 使用本地副本避免直接修改props
const localSearchParams = reactive({
  caseName: props.searchParams.caseName || '',
  status: props.searchParams.status || '',
  caseType: props.searchParams.caseType || '',
  dateRange: props.searchParams.dateRange || []
})

const statusOptions = [
  { label: '待受理', value: '1' },
  { label: '审核中', value: '5' },
  { label: '已通过', value: '6' },
  { label: '已拒绝', value: '7' },
  { label: '处理中', value: '2' },
  { label: '已完成', value: '3' },
  { label: '已取消', value: '4' }
]

const caseTypeOptions = [
  { label: '民事案件', value: '1' },
  { label: '刑事案件', value: '2' },
  { label: '行政案件', value: '3' },
  { label: '其他案件', value: '4' }
]

const handleSearch = () => {
  // 直接发射当前搜索参数
  emit('search', { ...localSearchParams })
}

const resetSearch = () => {
  localSearchParams.caseName = ''
  localSearchParams.status = ''
  localSearchParams.caseType = ''
  localSearchParams.dateRange = []
  emit('search', { ...localSearchParams })
}

// 监听props.searchParams变化
watch(() => props.searchParams, (newVal) => {
  localSearchParams.caseName = newVal.caseName || ''
  localSearchParams.status = newVal.status || ''
  localSearchParams.caseType = newVal.caseType || ''
  localSearchParams.dateRange = newVal.dateRange || []
}, { deep: true, immediate: true })
</script>

<template>
  <el-card shadow="never" class="search-card">
    <el-form :model="localSearchParams" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="案件名称">
            <el-input
                v-model="localSearchParams.caseName"
                placeholder="请输入案件名称"
                clearable
                @change="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案件状态">
            <el-select
                v-model="localSearchParams.status"
                placeholder="请选择案件状态"
                clearable
                @change="handleSearch"
            >
              <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案件类型">
            <el-select
                v-model="localSearchParams.caseType"
                placeholder="请选择案件类型"
                clearable
                @change="handleSearch"
            >
              <el-option
                  v-for="item in caseTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请时间">
            <el-date-picker
                v-model="localSearchParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                @change="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="text-right">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<style scoped>
.search-card {
  margin-bottom: 20px;
}

.text-right {
  text-align: right;
}
</style>